import { useEffect } from 'react'
// useLocation, useNavigate,
import { useRoutes } from 'react-router-dom'
import routes from './router'
import { ConfigProvider, theme } from 'antd'
// import { useSelector } from 'react-redux'

// //登录
// function ToLogin() {
//   console.log("🚀 ~ ToLogin ~ ToLogin:", ToLogin)
//   const navigate = useNavigate()
//   useEffect(() => {
//     navigate('/login')
//   }, [])

//   return <div></div>
// }
// //首页
// function ToHome() {
//   console.log("🚀 ~ ToHome ~ ToHome:", ToHome)
//   const navigate = useNavigate()
//   useEffect(() => {
//     navigate('/')
//   })

//   return <div></div>
// }

//路由权限
function BeforeRouterEnter() {
  const outLet = useRoutes(routes)
  // TODO: 后续对接接口，此处对接权限及Token
  // const token = null
  // const location = useLocation()
  // if (location.pathname === '/login' && token !== null) {
  //   return <ToHome />
  // }
  // console.log("🚀 ~ BeforeRouterEnter ~ location.pathname:", location.pathname)
  // if (location.pathname !== '/login' && token === null) {
  //   return <ToLogin />
  // }
  return outLet
}

const App = () => {
  const darkMode = false
  useEffect(() => {
    const html = document.documentElement
    //初始化dark-mode
    // html.setAttribute('dark-mode','light-mode')
    //获取html 标签中的dark-mode属性值
    // const htmlDarkMode = html.getAttribute('dark-mode')
    //将dark-mode属性值改变
    html.setAttribute('dark-mode', darkMode ? 'dark-mode' : 'light-mode')
  }, [darkMode])
  return (
    <div>
      <ConfigProvider
        theme={{
          // 设置暗黑模式算法
          algorithm: darkMode ? theme.darkAlgorithm : undefined,
        }}
      >
        <BeforeRouterEnter />
      </ConfigProvider>
    </div>
  )
}

export default App
